<template>
    <div >
        <div class="bg"></div>        
        
        <div class="container">
            <div class="line bouncein">
                <div class="xs6 xm4 xs3-move xm4-move">
                    <div style="height:150px;"></div>
                    <div class="media media-y margin-big-bottom"></div>
                    <form action="user" method="post">
                        <input type="hidden" name="opr" value="login" />
                        <div class="panel loginbox" id="formDiv">
                            <div class="text-center margin-big padding-big-top">
                                <h1>生产管理系统</h1>
                            </div>
                            <div class="panel-body" style="padding:30px; padding-bottom:10px; padding-top:10px;">
                                <div class="form-group">
                                    <div class="field field-icon-right">
                                        <input type="text" class="input input-big" placeholder="登录账号" value=""
                                            v-model="user.hr.workNumber" /> <span class="icon icon-user margin-small"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="field field-icon-right">
                                        <input type="password" class="input input-big" placeholder="登录密码" value=""
                                            v-model="user.password" /> <span class="icon icon-key margin-small"></span>
                                    </div>
                                </div>
                                <!-- <div class="form-group">
                                    <div class="field field-icon-right">
                                        <input type="text" class="input input-big" name="captcha" placeholder="验证码"
                                            value="" style="width: 180px;display: inline" />
                                        &nbsp<img src="http://localhost:8080/ticket/backstage/captcha" height="45px" width="100px"
                                            onclick="this.src='http://localhost:8080/ticket/backstage/captcha?'+new Date()" title="看不清?换一张">
                                    </div>
                                    <div>

                                    </div>
                                </div> -->
                            </div>

                            <div style="padding:30px;">
                                <input type="button" class="button button-block bg-main text-big input-big"  style="background-color: #0ae;" value="登录"
                                    @click="login">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    props: {
        msg: String
    },
    data() {
        return {
            user: {
                hr: {
                    workNumber:"WN202205230"
                },
                password: ""
            }
        }
    },
    methods: {
        login: function () {
            let that = this;//若以下then中为箭头函数,则可以直接使用this找到Vue对象,若以下then中为function,则this代表axios
            this.$http.post("/auth/login", this.user).then(function (r) {
                console.log(r);
                if (r.data.code == "200") {
                    localStorage.setItem("token", r.data.data)
                    location.href = "http://localhost:8081/index.html";
                } else if (r.data.code == "400") {
                    alert("用户名或密码错误")
                } else if (r.data.code == "500") {
                    alert("系统维护中")
                }
            })
        }
    }
}
</script>
